<template>
  <page-frame>
    <div class="order-management roomStandard">
      <div class="toptitle">
        <div class="left">房间标准</div>
        <div class="right">
          <div class="btns">
            <el-button @click="addMore" class="lightGreenBtn button-style">新增</el-button>
            <el-button @click="toRoom" class="button-style">返回</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="file-main">
        <div class="input">
          <el-row>
            <el-col style="width: 130px;">
              <div class="input-item">
                <el-select style="width:90%!important;" v-model="queryData.condition">
                  <el-option
                    v-for="item in filterOptions"
                    :label="item.filterName"
                    :value="item.condition">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="input-item" v-show="queryData.condition=='rmStdName'">
                <el-input v-model="queryData.val" placeholder="请输入房间标准名称">
                </el-input>
              </div>
              <div class="input-item" v-show="queryData.condition=='rmTypeName'">
                <el-input v-model="queryData.val" placeholder="请输入房间类型">
                </el-input>
              </div>
              <div class="input-item" v-show="queryData.condition=='description'">
                <el-input v-model="queryData.val" placeholder="请输入描述">
                </el-input>
              </div>
            </el-col>
            <!--<el-col :span="3" >-->
              <!--<div class="btns" style=" width:70%;">-->
                <!--<el-button class="query" @click="query">搜索</el-button>-->
              <!--</div>-->
            <!--</el-col>-->
          </el-row>
        </div>
        <div class="tabs">
          <el-table
            :data="tableData"
            border
            highlight-current-row
            @cell-dblclick="schedule=true"
            style="width: 100%"
            @row-click="rowClick"
          >
            <el-table-column
              prop="rmStdName"
              label="标准名称"
            >
            </el-table-column>
            <el-table-column
              prop="rmTypeName"
              label="房间类型"
            >
            </el-table-column>
            <el-table-column
              prop="rmEq"
              label="房间配备"
            >
            </el-table-column>
            <el-table-column
              prop="rmStdArea"
              label="房间面积"
            >
            </el-table-column>
            <el-table-column
              prop="description"
              label="描述"
            >
            </el-table-column>

            <el-table-column
              label="操作"
              width=""
            >
              <template scope="scope">
                <el-button type="text" size="small" @click.stop="edit(scope.row.rmStdId)">编辑</el-button>
                <el-button type="text" size="small" @click.stop="del(scope.row.rmStdId)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script>
  import roomApi from '../../service/corporation/roomApi';
  export default {
    data () {
      return {
        queryData: {
          condition: "rmStdName",
          val: "",
        },
        filterOptions: [{
          condition: "rmStdName",
          filterName: "房间标准名称"
        }, {
          condition: "rmTypeName",
          filterName: "房间类型",
        }, {
          condition: "description",
          filterName: "描述",
        }],
        roomStandardList: [],
      }
    },
    computed: {
      tableData() {
          let result = Object.assign(this.roomStandardList);
          if(this.roomStandardList && this.queryData.condition && this.queryData.val) {
              let key = this.queryData.condition;
              let val = this.queryData.val;
              result = this.roomStandardList.filter(n => {
                  return n[key].indexOf(val.trim()) >= 0;
              });
          }
          return result;
      }
    },
    methods: {
      init() {
        this.query();
      },
      query(){
        roomApi.getRoomStandardList().then(res => {
            this.roomStandardList = res.body.data;
            console.log(this.roomStandardList)
        }, res => {});
      },
      addMore(){
        this.$router.push({name: 'addRoomStandard'})
      },
      toRoom(){
        this.$router.push({name: 'room'});
      },
      rowClick(row) {
        this.$router.push({name: 'viewRoomStandard', params: {rmStdId: row.rmStdId}})
      },
      del(rmStdId){
        this.$confirm('确定删除房间标准', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          roomApi.removeRoomStandard(rmStdId).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            }, res => {});
            this.init();
          });
        }).catch(() => {});
      },
      edit(rmStdId){
        this.$router.push({name: 'editRoomStandard', params: {rmStdId: rmStdId}});
      },
    },
    mounted() {
      this.init();
    },
  }
</script>
<style>

  .input .btns {
    float: none !important;
    display: inline-block;
  }
  .input input {
    display: inline-block;
  }
  .el-select {
    display: block;
    position: relative;
  }
  .order-management .file-main .tabs {
    text-align: center;
    margin-top: 20px;
  }
  .order-management .file-main .el-table th > .cell {
    text-align: center;
    line-height: 50px;
  }
  .roomStandard .el-table .cell {
    line-height: 60px;
  }
  .roomStandard .button-style {
    width: 100px;
  }
</style>
